import type { GetServerSideProps, NextPage } from 'next'
import Head from 'next/head'
import Link from 'next/link'

import Headback from '../../components/Headback'

import styles from '../../styles/Set.module.scss'
import { useEffect, useState } from 'react'
import UploadImg from '../../components/UploadImg'
import { Cascader, Radio, Space, Toast } from 'antd-mobile'
import { Gender } from '../../models/enums'
import { options } from '../../assets/college/person'
import { UserService } from '../../services'
import { IUser } from '../../models/types'
import { Winicon } from '../../components/Icon'
import router from 'next/router'

interface Props {
  userinfo: IUser
}

export const getServerSideProps: GetServerSideProps = async ctx => {
  const res = await UserService.getuser(ctx.req.cookies.token)
  if (res.stat === 'OK') {
    return {
      props: {
        userinfo: res.user
      }
    }
  }
  return {
    redirect: {
      destination: '/login',
      permanent: false
    }
  }
}

const Setting: NextPage<Props> = ({ userinfo }) => {

  const [visible, setVisible] = useState(false)
  const [value, setValue] = useState<string[]>(userinfo.major)
  const [avatar, setAvatar] = useState(userinfo.avatar)
  const [gender, setGender] = useState(userinfo.gender)
  const [name, setName] = useState(userinfo.nickname)
  const [contact, setContact] = useState(userinfo.qqnumber.toString())
  const [des, setDes] = useState(userinfo.signature)

  async function updateinfo() {
    const res = await UserService.updateinfo(name, des, contact, avatar, gender, value)
    if (res.stat === 'OK') {
      Toast.show({ content: <Winicon text='信息修改成功' /> })
      router.push('/user/mine/dynamic')
    }
  }

  return (
    <div className='page'>
      <Head>
        <title>个人信息设置页</title>
      </Head>
      <Headback page='个人设置' />
      <div className="wrap">
        <ul className={styles.info}>
          <div className={styles.avatar}>
            <p>头像</p>
            <UploadImg
              url={avatar}
              onChange={(value: string[]) => { setAvatar(value[0]) }}
              max={1} />
          </div>
          <li>
            <span>性别</span>
            <Radio.Group defaultValue={gender} onChange={e => setGender(e as number)}>
              <Space direction='horizontal'>
                <Radio value={Gender.male}>蓝同学</Radio>
                <Radio value={Gender.female}>女同学</Radio>
                <Radio value={Gender.null}>保密</Radio>
              </Space>
            </Radio.Group>
          </li>
          <li onClick={() => setVisible(true)}>
            <span>专业</span>
            <Cascader
              title='选择你的专业'
              options={options}
              visible={visible}
              onClose={() => setVisible(false)}
              value={value}
              onConfirm={setValue}
            >
              {items => {
                if (items.every(item => item === null)) {
                  return '未选择'
                } else {
                  return items.map(item => item?.label ?? '未选择').join('-')
                }
              }}
            </Cascader>
          </li>
          <li>
            <span>昵称</span>
            <input name="" id="" placeholder='1~6个字符'
              maxLength={6}
              minLength={1}
              value={name}
              onChange={v => setName(v.target.value)}
            />
          </li>
          <li>
            <span>联系方式</span>
            <input name="" id="" placeholder='邮箱/手机号/微信/QQ'
              value={contact}
              onChange={v => setContact(v.target.value)}
            />
          </li>
          <li>
            <span className={styles.me}>签名</span>
            <textarea name="" id="" maxLength={30} placeholder='一些自己的信息'
              value={des}
              onChange={v => setDes(v.target.value)}
            />
          </li>
        </ul>
        <div className={styles.subwarp}>
          <div className={styles.submit} onClick={updateinfo} >
            修改
          </div>
        </div>

      </div>
    </div>
  )
}

export default Setting
